<%{ head %>
<%
document.require('/diligence/integration/frontend/sencha/')
Diligence.Sencha.extJsHead(conversation, 'ext-theme-gray')
%>
<%}%>
<%& '/site/header/' %>
<% exampleHeader('Sencha', 'Integration', 'Grids'); %>

<p>
	We've connected this grid widget to the "users" MongoDB collection.
	The relevant source code is in "routing.js" and "/libraries/resources.js".
</p>
<p>
	Double click on any cell to edit it. Your changes will be saved when you leave the cell.
	To appreciate what's going on in this demo, we recommend
	using <a href="http://getfirebug.com/">Firebug</a> to see all the communication with the server.	
</p>
<p>
	This is a simple example, but take a moment to marvel at how powerful it is: we've set up
	a URI-space over our MongoDB data using the <a href="../../../service/rest">REST Service</a>,
	and then directly hooked up an editable grid widget to it. And all in just a few dozen lines
	of JavaScript: some on the server, some on the client. This is a nice demonstration of the
	power of Diligence and Ext JS!
</p>
<p>
	Use the "Resource" combo box to switch to the in-memory and distributed resources. See the
	<a href="../../../service/rest">REST Service example</a> for more information.
</p>
<div id="grid"></div>

<%{ foot %>
<script type="text/javascript">
Ext.onReady(function() {
	var pageSize = 15;

	Ext.define('User', {
		extend: 'Ext.data.Model',
		fields: [
			'_id',
			'name',
			{name: 'lastSeen', type: 'date'}
		],
		idProperty: '_id',
		proxy: {
			type: 'diligence',
			url: '<%.%>/mongo/users/'
		}
	});
	
	var store = Ext.create('Ext.data.Store', {
		model: 'User',
		pageSize: pageSize,
		autoSync: true,
		autoLoad: true
	});
	
	var uris = Ext.create('Ext.data.Store', {
		fields: ['uri', 'text'],
		data : [
			{uri: 'mongo', text: 'MongoDB'},
			{uri: 'memory', text: 'in-memory'},
			{uri: 'distributed', text: 'distributed'}
		]
	});
	
	Ext.create('Ext.grid.Panel', {
		store: store,
		columns: [{
			dataIndex: 'name',
			header: 'Name',
			editor: 'textfield'
		}, {
			dataIndex: 'lastSeen',
			xtype: 'datecolumn',
			format: 'm/d/y, H:i',
			header: 'Last Seen',
			editor: {
				xtype: 'datefield',
				format: 'm/d/y, H:i'
			}
		}],
		forceFit: true,
		selType: 'cellmodel',
		plugins: [
			Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 2})
		],
		dockedItems: [{
			dock: 'bottom',
			xtype: 'pagingtoolbar',
			store: store,
			items: [{
				text: 'Resource:'
			}, {
				xtype: 'combobox',
				width: 150,
				store: uris,
				valueField: 'uri',
				value: 'mongo',
				queryMode: 'local',
				editable: false,
				listeners: {
					'select': function(combo, records) {
						var uri = records[0].get('uri');
						var proxy = User.getProxy();
						proxy.url = '<%.%>/' + uri + '/users/';
						store.load();
					}
				}
			}]
		}],
		renderTo: 'grid',
		style: {
			margin: 'auto'
		},
		width: 500,
		height: 370
	});
});
</script>
<%}%>

<% exampleFooter('Sencha', 'Integration', 'Grids'); %>
<%& '/site/footer/' %>